<template>
  <div class="container">
    <div class="back" @click="back">
      <div><img src="../../../assets/image/back.png"></div>
      <div>设置</div>
    </div>
    <div class="center">
      <div class="center-item-head">
        <div class="left-item">账户头像</div>
        <div class="head">
          <div class="head-image"><img :src="userInfo.headPortrait">
            </div><input class="input" type="file" @change="upload">
        </div>
      </div>
      <div class="center-item">
        <div class="left-item">姓名</div>
        <div class="center-item-item">
          <div>{{userInfo.name}}</div>
          <div class="image" @click="moveToChange('name')"><img src="../../../assets/image/向右交换.png"></div>
        </div>
      </div>
      <div class="center-item">
        <div class="left-item">性别</div>
        <div class="center-item-item">
          <div>{{userInfo.gender}}</div>
          <div class="image" @click="moveToChange('gender')"><img src="../../../assets/image/向右交换.png"></div>
        </div>
      </div>
      <div class="center-item">
        <div class="left-item">年龄</div>
        <div class="center-item-item">
          <div>{{userInfo.year}}</div>
          <div class="image" @click="moveToChange('year')"><img src="../../../assets/image/向右交换.png"></div>
        </div>
      </div>
      <div class="center-item">
        <div class="left-item">修改密码</div>
        <div>
          <div class="image" @click=""><img src="../../../assets/image/向右交换.png"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {requestUpload} from "../../../network/request";

export default {
  name: "change",
  data(){
    return {
      userInfo:{}
    }
  },
  methods: {
    back() {
      this.$router.push('profile')
    },
    moveToChange(e){
      this.$router.push({path:'change',
        query:{
          name:e
        }
      })
    },
    upload(e){
      let that = this
      let token = localStorage.getItem('token')
      requestUpload([token,e.target.files[0]]).then(res=>{
        that.$toast('上传成功！')
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        that.userInfo.headPortrait = window.URL.createObjectURL(e.target.files[0])
        localStorage.setItem('userInfo',JSON.stringify(userInfo))
      })
    }
  },
  mounted() {
    let userInfo = localStorage.getItem("userInfo")
    this.userInfo = JSON.parse(userInfo)
  }
}
</script>

<style scoped>
.container {
  background-image: url("../../../../src/assets/image/setBack.png");
  height: 100vh;
  width: 100%;
  background-size: 100% 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
.left-item{
  margin-left: 10px;
}
.input{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: -105px;
  opacity: 0;
}
.back {
  position: absolute;
  font-size: 30px;
  color: white;
  display: flex;
  flex-direction: row;
  margin-top: 35px;
  margin-left: 20px;
  font-weight: bolder;
}
.head{
  /*position: absolute;*/
}
.head-image img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 50px;
}
.back img {
  width: 30px;
  margin-right: 20px;
}
.center-item-item{
  display: flex;
  flex-direction: row;
}
.image img{
  width: 45px;
  height: 45px;
  margin-left: 10px;
}
.center-item-head{
  display: flex;
  flex-direction: row;
  height: 100px;
  width: 350px;
  align-items: center;
  margin-bottom: 30px;
  justify-content: space-between;
  /*box-shadow: 5px 2px 5px;*/
  color: white;
  font-weight: bolder;
  font-size: 25px;
}
.center-item {
  display: flex;
  flex-direction: row;
  height: 100px;
  width: 350px;
  align-items: center;
  justify-content: space-between;
  /*box-shadow: 5px 2px 5px;*/
  color: white;
  font-weight: bolder;
  font-size: 25px;
}

.center {
  position: absolute;
  margin-top: 130px;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
}
</style>
